<template>
  <div class="todoapp">
    <todo-header :arr="list" @keyupAdd="onKeyupAdd"></todo-header>
    <todo-main :arr="filterList" @delIt="onDelIt"></todo-main>
    <todo-footer 
    :arr="list" 
    :sel="isSel" 
    @setSel="onsetSel"
    @clear="onClear"></todo-footer>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  data () {
    return {
      // all全部  yas已完成  no未完成
      isSel:'all',
      list: JSON.parse(localStorage.getItem('list'))||[]
    }
  },
  watch:{
    list:{
      deep:true,
      handler(){
        localStorage.setItem('list',JSON.stringify(this.list))
      }
    }
  },
  computed:{
    // 点击 全部/未完成/已完成 渲染数据
    filterList(){
      // 未完成
      if(this.isSel=='no') return this.list.filter(item=>!item.isDone)
      // 已完成
      if(this.isSel=='yas') return this.list.filter(item=>item.isDone)
      // 全部
      return this.list
    }
  },
  methods: {
    // 添加任务
    onKeyupAdd(taskName){
      const flag= this.list.some(item=>item.name===taskName)
      if(flag) return alert('任务已存在')
      const id= this.list.length ?this.list[this.list.length-1].id+1 :100
      this.list.push({ id, name: taskName, isDone: false })
    },
    // 删除
    onDelIt(delItId){
      const index=this.list.findIndex(it=>it.id===delItId)
      this.list.splice(index,1)
    },
    // 点击 全部/未完成/已完成 高亮效果
    onsetSel(sel){
      this.isSel=sel
    },
    // 清除已完成
    onClear(undone){
      this.list=undone
    }
  },
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  }
}
</script>

<style scoped>

</style>
